<!--
 * @Description: 课程列表组件，支持搜索筛选、课程信息展示和简单交互
 * @Author: charles
 * @Date: 2021-12-19 10:11:07
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-09-26 09:00:38
-->
<template>
  <div class="course-list-container">
    <div class="course-header">
      <h1>课程列表</h1>
      <div class="course-filter">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索课程..."
          class="search-input"
        />
        <select v-model="selectedCategory" class="category-select">
          <option value="">所有分类</option>
          <option v-for="category in categories" :key="category" :value="category">
            {{ category }}
          </option>
        </select>
      </div>
    </div>

    <div class="course-grid">
      <div 
        v-for="course in filteredCourses" 
        :key="course.id" 
        class="course-card"
        @click="handleCourseClick(course.id)"
      >
        <div class="course-image">
          <img :src="course.imageUrl" :alt="course.title" />
        </div>
        <div class="course-info">
          <h3 class="course-title">{{ course.title }}</h3>
          <p class="course-instructor">讲师: {{ course.instructor }}</p>
          <div class="course-meta">
            <span class="course-category">{{ course.category }}</span>
            <span class="course-rating">
              <i class="star-icon">★</i> {{ course.rating }}
            </span>
          </div>
          <p class="course-price">{{ course.price | formatPrice }}</p>
        </div>
      </div>
    </div>

    <div v-if="filteredCourses.length === 0" class="no-results">
      没有找到匹配的课程，请尝试其他搜索条件。
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      courses: [
        {
          id: 1,
          title: 'Vue.js 从入门到精通',
          instructor: '许鹏飞教授',
          category: '前端开发',
          rating: 4.8,
          price: 199,
          imageUrl: 'https://picsum.photos/id/24/300/200'
        },
        {
          id: 2,
          title: 'Python 数据分析实战',
          instructor: '肖世渊老师',
          category: '数据科学',
          rating: 4.7,
          price: 299,
          imageUrl: 'https://picsum.photos/id/42/300/200'
        },
        {
          id: 3,
          title: 'React 组件化开发',
          instructor: '卢工程师',
          category: '前端开发',
          rating: 4.9,
          price: 249,
          imageUrl: 'https://picsum.photos/id/65/300/200'
        },
        {
          id: 4,
          title: 'Java 后端架构设计',
          instructor: '杜架构师',
          category: '后端开发',
          rating: 4.6,
          price: 399,
          imageUrl: 'https://picsum.photos/id/96/300/200'
        },
        {
          id: 5,
          title: '机器学习基础',
          instructor: '人机博士',
          category: '人工智能',
          rating: 4.8,
          price: 499,
          imageUrl: 'https://picsum.photos/id/12/300/200'
        },
        {
          id: 6,
          title: 'UI/UX 设计原理',
          instructor: '朱设计师',
          category: '设计',
          rating: 4.5,
          price: 199,
          imageUrl: 'https://picsum.photos/id/29/300/200'
        }
      ]
    };
  },
  computed: {
    // 提取所有唯一的课程分类
    categories() {
      return [...new Set(this.courses.map(course => course.category))];
    },
    // 根据搜索条件和分类筛选课程
    filteredCourses() {
      return this.courses.filter(course => {
        const matchesSearch = course.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                             course.instructor.toLowerCase().includes(this.searchQuery.toLowerCase());
        const matchesCategory = this.selectedCategory ? course.category === this.selectedCategory : true;
        return matchesSearch && matchesCategory;
      });
    }
  },
  filters: {
    // 格式化价格显示
    formatPrice(price) {
      return `¥${price.toFixed(2)}`;
    }
  },
  methods: {
    // 处理课程卡片点击事件
    handleCourseClick(courseId) {
      this.$emit('course-click', courseId);
      // 可以在这里添加路由跳转逻辑，例如:
      // this.$router.push(`/courses/${courseId}`);
    }
  }
};
</script>

<style scoped>
.course-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.course-header {
  margin-bottom: 30px;
}

.course-header h1 {
  color: #333;
  margin-bottom: 15px;
  font-size: 24px;
}

.course-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.category-select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.course-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.course-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  padding: 15px;
}

.course-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-instructor {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}

.course-category {
  color: #42b983;
  background-color: rgba(66, 185, 131, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.course-rating {
  color: #ff9800;
}

.star-icon {
  margin-right: 3px;
}

.course-price {
  font-size: 16px;
  font-weight: bold;
  color: #e53935;
}

.no-results {
  text-align: center;
  padding: 50px 0;
  color: #666;
  font-size: 16px;
}

@media (max-width: 768px) {
  .course-filter {
    flex-direction: column;
  }
  
  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
</style>